<template>
	<view class="content">
		<view class="serchbox">
			<view class="mp-search-box">
				<image src="../../static/logo.png" style="width: 130upx;height: 26upx;align-items: center;"></image>
				<input class="ser-input" type="search" placeholder="输入关键字搜索" v-model="searchString" @change="search()"/>
				<text @click="backpage()" style="font-size: 28upx;color: #fff;">取消</text>
			</view>
		</view>
		<view style="padding-top: 180upx;">
			<!-- 热门搜索 -->
			<view style="padding:16upx 30upx 38upx;background-color: #fff;">
				<view class="titlebox">热门搜索</view>
				<view style="padding-top: 20upx;">
					<view v-for="(item,index) in hotkeywords" class="keyitem" :key="index" @click="getkeywords_search(item)">{{item}}</view>
				</view>
			</view>
			<view style="padding:16upx 30upx;background-color: #fff;">
				<view class="titlebox" >热门推荐</view>
			</view>
			<!-- 热门推荐 -->
			<view>
				<view style="padding: 20upx 30upx;display: flex;flex-wrap: wrap;" class="hot-goodbox"> 
					<view class="gooditem" v-for="(item,index) in hotgoods" :key="index" @click="godetial(item.id)">
						<view>
							<image :src="item.images"  style="height: 288upx;width:100%;border-radius: 20upx 20upx 0 0;"></image>
						</view>
						<view style="padding: 14upx;">
							<view class="goodtitle">{{item.title}}</view>
							<view style="color: #EC6104;font-size: 26upx;margin: 8upx 0;">{{item.price}}</view>
							<view style="color: #999;font-size: 22upx;text-decoration: line-through;">{{item.original_price}}</view>
						</view>
					</view>
					 
					
				</view>
			</view>
		</view>
		
	</view>
			

</template>
<script>
	import postAjax from '../../API/postAjax.js'
	export default {
		data() {
			return {
				// 快递xinxi
				userToken:'',
				// 热门关键字
				hotkeywords:[],
				searchString:'',
				// 热门的产品信息 -- 搜索的产品信息
				hotgoods:{},
			}
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.getkeywords()
			that.get_hot_goods()
		},
		methods: {
			// 返回上一页面
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			// 热门搜索
			getkeywords(){
				let that = this
				postAjax('Search/SearchKeywords',{},function(data){
					console.log(data)
					if(data.code==0){
						that.hotkeywords = data.data
					}else{
						that.getkeywords()
					}
					
				})
			},
			// 跳转到详情页
			godetial(id) {
				
				uni.navigateTo({
					url: "../order/detail?id=" + id
				})
				
			},
			// 获取热卖
			get_hot_goods(){
				let that = this
				postAjax('goods/hotRecommend',{},function(data){
					if(data.code==0){
						console.log(data)
						that.hotgoods = data.data
					}else{
						that.get_hot_goods()
					}
					
				})
			},
			//点击热门搜索直接搜索
			getkeywords_search(searchString)
			{
				let that = this
				that.searchString = searchString
				that.search()
			},
			search(){
				let that = this
				that.searchString =''
				uni.navigateTo({
					url:'../hotfunc/goodslist?keywords='+that.searchString.trim(),
				
					animationDuration:300
				})
						
			}
		
		}
	}
</script>

<style>
.borderox{border-top:2upx solid #eee}
.content {min-height: 100vh;position: relative;background-color: #f9f9f9;}
.serchbox{background-color: #1D84E8;;width: 100%;top:0;left:0;z-index: 99;position: fixed;}
.mp-search-box{display: flex;align-items: center;padding:90upx 40upx 16upx 24upx;}
.ser-input{flex:1;margin:0 36upx 0 28upx;background-color: #fff;font-size: 28upx;padding: 16upx 20upx;border-radius: 20vw;}
.titlebox{position: relative;font-size: 28upx;color: #333;padding-left: 22upx;}
.titlebox::before{content: '';display: block;background-color: #1D84E8;width: 8upx;height:30upx;position: absolute;left:0;top:6upx}
.flex-1{flex:1}
.gooditem{background-color: #fff;color: #fff;font-size: 28upx;border-radius: 20upx;width: 48%;margin-bottom: 20upx;}
.hot-goodbox>.gooditem:nth-child(2n+2){margin-left:4%;}
.goodtitle{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #333;}
.keyitem{display: inline-block;padding: 16upx 24upx;color: #666;font-size: 24upx;border-radius: 6upx;border:2upx solid #C1C3C5;margin:0  18upx 14upx;max-width: 250upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
</style>
